<template >
  <div class="fuel_remit_susses_container">
    <div class="icon"></div>
    <div class="title">交易成功</div>
    <div class="time">
      下单时间{{ele.createdDate}}
    </div>
    <div class="remit_susses_main">
      <div class="remit_susses_main_tip">
        展示给加油站员查看
      </div>
      <div class="remit_susses_main_title">
        <div class="remit_price">￥<span class="value">{{ele.amt}}</span></div>
        <div class="preferential">本次为你节省￥{{(ele.discountAmt + ele.discountCouponAmt).toFixed(2)}}元</div>
      </div>
      <div class="item_list">
        <div class="item">
          <div class="title">油号/油枪</div>
          <div class="value">{{ele.oilName}}/{{ele.oilGun}}号枪</div>
        </div>
        <div class="item">
          <div class="title">加油金额</div>
          <div class="value">{{ele.receivableAmt}}</div>
        </div>
        <div class="item">
          <div class="title">积分变动</div>
          <div class="value" v-if="ele.recordType">{{ele.recordType + ele.integral}}</div>
          <div class="value" v-else>0</div>
        </div>
        <div class="item">
          <div class="title">立减优惠</div>
          <div class="value">{{ele.discountAmt}}</div>
        </div>
        <div class="item">
          <div class="title">油站地址</div>
          <div class="value">{{ele.stationName}}</div>
        </div>
        <div class="item">
          <div class="title">实际支付</div>
          <div class="value">{{ele.amt}}</div>
        </div>
        <div class="item">
          <div class="title">会员余额</div>
          <div class="value">{{ele.balance}}</div>
        </div>
        <div class="item">
          <div class="title">剩余可使用优惠券</div>
          <div class="value">{{ele.couponCount}}张</div>
        </div>
      </div>
      <div class="btn_all_info" @click="$router.replace({path: `/${enterpriseId}/record/${ele.orderNo}`})">
        点击查看完整信息
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions,mapMutations } from "vuex";
import wx from "weixin-js-sdk";
import Vue from "vue";

export default {
  head() {
    return {
      title: "一键加油",
    };
  },
  data() {
    return {
      ele: {},
    };
  },
  created() {
    this.init();
  },

  computed: {

  },

  methods: {
    async init() {
      const amountData = await this.$axios.$get("/selectOrderInfoByOrdNo", {
        params: {
          orderNo: this.$route.query.ordNo
        },
      });

      if (amountData.retCode !== 0) {
        this.$router.replace({path: `/${this.enterpriseId}/my`})
        throw new Error(amountData.message);
      } else {
        this.ele = amountData.data || {};
      }
    }
  },
};
</script>

<style lang="scss" >
  .fuel_remit_susses_container {
    box-sizing: border-box;
    min-height: 100vh;
    padding: .44rem .3rem;
    .icon {
      position: absolute;
      top: -1.7rem;
      z-index: -1;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("../../../static/fuel/success.jpg");
      background-size: cover;
    }
    .title {
      font-size: .7rem;
      color: #fff;
    }
    .time {
      font-size: .36rem;
      color: #fff;
      margin: .6rem 0 .4rem;
    }
    .remit_susses_main {
      width: 100%;
      height: 7rem;
      box-sizing: border-box;
      padding: 0.32rem 0.6rem;
      background-color: #fff;
      border-radius: 0.2rem;
      .remit_susses_main_tip {
        width: 100%;
        text-align: center;
        color: #67bcbf;
        font-size: .36rem;
      }
      .remit_susses_main_title {
        width: 100%;
        text-align: center;
        margin: 0.45rem 0 0.24rem;
        .remit_price {
          color: #333;
          font-size: .32rem;
          .value {
            font-size: .6rem;
            font-weight: 600;
          }
        }
        .preferential {
          font-size: .24rem;
          color: #fd7561;
        }
      }
      .item_list {
        .item {
          display: flex;
          justify-content: space-between;
          color: #333;
          font-size: .24rem;
          margin-bottom: 0.36rem;
          .title {
            color: #333;
            font-size: .24rem;
          }
        }
      }
      .btn_all_info {
        width: 100%;
        text-align: center;
        color: #67bcbf;
        font-size: 0.2rem;
        line-height: 0.44rem;
      }
    }
  }
</style>
